<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-16 13:52:40
 * @LastEditTime: 2024-06-26 00:51:28
 * @Description: 消息中心
-->
<template>
  <div class="news-container">
    <div class="left-con">
      <div class="con-head">
        <div class="con-head-title">消息</div>
        <div class="con-head-right">
          <span class="btn" @click="readFun('')">全部已读</span>
          <span v-show="btnType === '1'" class="btn" @click="btnType = '2'">批量处理</span>
          <span v-show="btnType === '2'" class="btn" @click="delAll()">删除</span>
          <span v-show="btnType === '2'" class="btn" @click="btnType = '1'">取消</span>
        </div>
      </div>
      <div class="con-body">
        <div class="con-tab-box">
          <div class="tabs" :class="{ active: tabsActive === '1' }" @click="showTabs('1')">
            全部({{ newList.length }})
            <div class="line"></div>
          </div>
          <div class="tabs" :class="{ active: tabsActive === '2' }" @click="showTabs('2')">
            未读({{ unReadList.length }})
            <div class="line"></div>
          </div>
          <div v-show="btnType === '2'" class="tabs c-tabs"
            :class="{ active: checkList.length === newsShowList.length }" @click="checkAll()">全选({{ checkList.length }})
            <span class="iconfont icon-xuanzhong"></span>
          </div>
        </div>
        <div class="con-list-box">
          <div v-for="(item) in newsShowList " :key="item.id" class="news-list-box"
            :class="{ chooseList: checkList.indexOf(item.question_uuid) !== -1 }" @click="chooseNews(item)">
            <div v-if="false" class="badge">0</div>
            <div class="img-box">
              <img :src="item.query_user_info.icon ? item.query_user_info.icon : userIcon" alt="" />
            </div>
            <div class="info-box">
              <div class="title">{{ item.query_user_info.real_name }} <div class="time">{{ item.query_datetime }}</div>
              </div>
              <div class="text">{{ item.query }}</div>
              <span v-show="btnType === '2'" class="iconfont icon-xuanzhong"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-con">
      <div class="con-head">
        <div class="con-head-title" v-if="chooseData && chooseData.query_user_info && chooseData.query_user_info">{{
          chooseData.query_user_info &&
            chooseData.query_user_info.real_name &&
            chooseData.query_user_info.real_name !== undefined ? chooseData.query_user_info.real_name : '--' }}
        </div>
        <div class="con-head-right">
          <span class="btn" @click="delNews(chooseData.query_user_uniqueid)">删除</span>
        </div>
      </div>
      <div class="con-body con-body2">
        <div class="time-tips" v-if="chooseData.query_datetime">{{ chooseData.query_datetime }}</div>
        <div v-for="(item) in chooseHistory" :key="item.id" class="news-div">
          <div class="news-box news-query">
            <div class="img-box">
              <img :src="chooseData.query_user_info.icon ? chooseData.query_user_info.icon : userIcon" alt="" />
            </div>
            <div class="info-box">
              <div class="text">{{ item.query }}</div>
            </div>
          </div>
          <div class="news-box news-answer">
            <div class="img-box">
              <img :src="userData.icon ? userData.icon : userIcon" alt="" />
            </div>
            <div class="info-box">
              <div class="text">{{ item.nlp_content }}</div>
              <div class="add-btn" @click="runTo('/news-center/add-request', item)">+ 添加到模型</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { chatHistoryApi, delUserChatApi, knowledgeChatApi } from '@/api/news'
import { getInfo } from '@/api/user'
import userIcon from '@/assets/images/user-logo.png'
export default {
  components: {

  },
  data() {
    return {
      userData: {},
      tabsActive: '1',
      btnType: '1', // 1:批量2：删除、取消
      checkList: [],
      // 全部
      newList: [],
      // 未读
      unReadList: [],
      // 显示的
      newsShowList: [
        {
          "question_uuid": "778e184150f54110b888032004492159",
          "query": "你是\n",
          "nlp_content": "你好，知识库-007884627dd8424b9c6dfcb17c2b0a54，我是一个虚拟助手，专注于提供有用的信息和帮助。我们可以聊些积极的话题，比如科技、文化或者生活建议。有什么想聊的吗？",
          "query_user_info": {
            "account_phone": "13706826744",
            "users_uniqueid": "007884627dd8424b9c6dfcb17c2b0a54",
            "real_name": "朱豪华",
            "icon": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/1901c6a37295f587ca047f9e..png",
            "unit_name": "测试单位",
            "unit_logo": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/1901c6a4e6665adebe8e2d31..png",
            "unit_department": "天牢",
            "unit_title": "监狱长",
            "unit_job": "长老1,长老2",
            "intro": "哈哈哈1122333",
            "create_datetime": "2024-06-12 19:59:19",
            "update_datetime": "2024-06-22 23:51:42",
            "unit_level": "测试单位级别",
            "real_photo": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/19030ef6a8f970e0b147108c..jpg",
            "phone_visible_switch": 1,
            "work_phone": "1370000000",
            "unit_addr": "测试详细地址",
            "unit_addr_province": "河北省",
            "unit_addr_city": "秦皇岛市",
            "unit_addr_region": "北戴河区"
          },
          "query_user_uniqueid": "007884627dd8424b9c6dfcb17c2b0a54",
          "query_datetime": "2024-06-25 00:42:58",
          "unread_count": "6"
        }
      ],
      userIcon: userIcon,
      chooseData: {
        "question_uuid": "778e184150f54110b888032004492159",
        "query": "你是\n",
        "nlp_content": "你好，知识库-007884627dd8424b9c6dfcb17c2b0a54，我是一个虚拟助手，专注于提供有用的信息和帮助。我们可以聊些积极的话题，比如科技、文化或者生活建议。有什么想聊的吗？",
        "query_user_info": {
          "account_phone": "13706826744",
          "users_uniqueid": "007884627dd8424b9c6dfcb17c2b0a54",
          "real_name": "朱豪华",
          "icon": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/1901c6a37295f587ca047f9e..png",
          "unit_name": "测试单位",
          "unit_logo": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/1901c6a4e6665adebe8e2d31..png",
          "unit_department": "天牢",
          "unit_title": "监狱长",
          "unit_job": "长老1,长老2",
          "intro": "哈哈哈1122333",
          "create_datetime": "2024-06-12 19:59:19",
          "update_datetime": "2024-06-22 23:51:42",
          "unit_level": "测试单位级别",
          "real_photo": "https://static.efenshen.com/007884627dd8424b9c6dfcb17c2b0a54/19030ef6a8f970e0b147108c..jpg",
          "phone_visible_switch": 1,
          "work_phone": "1370000000",
          "unit_addr": "测试详细地址",
          "unit_addr_province": "河北省",
          "unit_addr_city": "秦皇岛市",
          "unit_addr_region": "北戴河区"
        },
        "query_user_uniqueid": "007884627dd8424b9c6dfcb17c2b0a54",
        "query_datetime": "2024-06-25 00:42:58",
        "unread_count": "6"
      },
      // 选中消息的历史消息
      chooseHistory: [
        {
          "id": 34,
          "nlp_content": "你好，知识库-007884627dd8424b9c6dfcb17c2b0a54，我是一个虚拟助手，专注于提供有用的信息和帮助。我们可以聊些积极的话题，比如科技、文化或者生活建议。有什么想聊的吗？",
          "query": "你是\n",
          "create_datetime": "2024-06-25 00:42:58"
        },
        {
          "id": 33,
          "nlp_content": "hello word222222",
          "query": "你好\n",
          "create_datetime": "2024-06-25 00:42:51"
        },
      ]
    }
  },
  created() {
    this.gertUserData()
    this.getNewsData()
  },
  methods: {
    gertUserData() {
      getInfo().then((res) => {
        this.userData = res.data
      })
    },
    getNewsData() {
      knowledgeChatApi().then((res) => {
        this.newList = res.data
        this.showTabs('1')
        if (res.data.length > 0) {
          // this.chooseNews(res.data[0])
        } else {
          this.chooseData = {}
          this.chooseHistory = []
        }
      })
    },
    // 获取未读消息
    gertUnNewsData() {
      // const data = {
      //   read_switch: 0
      // }
      // getletterApi(data).then((res) => {
      //   this.unReadList = res.data
      // })
    },
    showTabs(type) {
      this.tabsActive = type
      if (type === '1') {
        this.newsShowList = this.newList
      } else {
        this.newsShowList = this.unReadList
      }
      if (this.newsShowList.length > 0) {
        this.chooseNews(this.newsShowList[0])
      }
    },
    chooseNews(item) {
      if (this.btnType === '2') {
        const ind = this.checkList.indexOf(item.question_uuid)
        if (ind !== -1) {
          this.checkList.splice(ind, 1)
        } else {
          this.checkList.push(item.question_uuid)
        }
      } else {
        this.chooseData = JSON.parse(JSON.stringify(item))
        const data = {
          query_user_uniqueid: item.query_user_uniqueid
        }
        chatHistoryApi(data).then((res) => {
          this.chooseHistory = res.data.data
        })
        // if (item.read_switch === 0) {
        //   //
        // }
      }
    },
    checkAll() {
      if (this.checkList.length === this.newsShowList.length) {
        this.checkList = []
      } else {
        this.newsShowList.forEach(ele => {
          this.checkList.push(ele.question_uuid)
        })
      }
    },
    // 已读TODO:
    readFun(type) {
      if (type === '') {
        // 全部
      }
    },
    runTo(url, data) {
      const d = { data: JSON.stringify(data) }
      this.$router.push({ path: url, query: d })
    },
    delNews(id) {
      const that = this
      this.$confirm('确认删除??', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          query_user_uniqueid: id
        }
        delUserChatApi(data).then((res) => {
          that.getNewsData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    delAll() {
      if (this.checkList.length <= 0) {
        return false
      }
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const sd = this.checkList.toString()
        const data = {
          question_uuid: sd
        }
        delHistoryApi(data).then((res) => {
          this.getNewsData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.news-container {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  .left-con {
    width: 405px;
    height: 100%;
    border-right: 1px solid #E0E0E0;
  }

  .right-con {
    width: calc(100% - 405px);
    height: 100%;
  }

  .con-head {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 32px;
    display: flex;
    align-items: end;
    justify-content: space-between;

    .con-head-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #1C1F23;
    }

    .con-head-right {
      .btn {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #04D1B8;
        padding: 0 10px;
        cursor: pointer;
      }

      .btn:hover {
        color: #2fc5b3;
      }
    }
  }

  .con-body {
    width: 100%;
    height: calc(100% - 64px);
    overflow-y: auto;

    .con-tab-box {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;

      .tabs {
        height: 100%;
        padding: 0 15px;
        line-height: 40px;
        cursor: pointer;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #9E9E9E;
        position: relative;

        .line {
          position: absolute;
          width: 28px;
          height: 2px;
          left: calc(50% - 14px);
          top: 32px;
          background: #04D1B8;
          display: none;
        }
      }

      .tabs:hover,
      .tabs.active {
        color: #04D1B8;

        .line {
          display: block;
        }
      }

      .c-tabs {
        position: absolute;
        right: 10px;
        top: 0;

        .iconfont {
          font-size: 14px;
        }
      }

      .c-tabs.active {
        color: #04D1B8;
      }
    }

    .con-list-box {
      width: 100%;
      height: calc(100% - 40px);
      padding: 20px;

      .news-list-box {
        width: 100%;
        height: 64px;
        padding: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        position: relative;

        .badge {
          background: #FF3F40;
          border-radius: 50%;
          border: 1px solid #FFFFFF;
          padding: 4px 5px;
          font-size: 10px;
          color: #FFFFFF;
          position: absolute;
          left: 36px;
          top: -5px;
          line-height: 10px;
          z-index: 20;
        }

        .img-box {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: #eee;
          overflow: hidden;
          position: relative;
          z-index: 1;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .info-box {
          padding-left: 14px;
          width: calc(100% - 44px);
          position: relative;

          .title {
            position: relative;
            font-family: PingFang SC, PingFang SC;
            font-weight: 700;
            font-size: 16px;
            color: #1C1F23;
            line-height: 26px;
            text-align: left;

            .time {
              position: absolute;
              right: 0;
              top: 0;
              font-weight: 400;
              font-size: 12px;
              color: #9E9E9E;
            }
          }

          .text {
            font-size: 14px;
            color: #6A6B6C;
            line-height: 16px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .iconfont {
            position: absolute;
            right: 8px;
            top: 20px;
            color: #E0E0E0;
          }
        }
      }

      .news-list-box:hover,
      .news-list-box.active {
        background: #F4F5F9;
      }

      .chooseList {
        .info-box {
          .iconfont {
            color: #04D1B8;
          }
        }
      }
    }

  }

  .con-body2 {
    .time-tips {
      width: 100%;
      font-weight: 400;
      font-size: 12px;
      color: #9E9E9E;
      line-height: 36px;
      text-align: center;
    }

    .news-div {
      width: 100%;
    }

    .news-box {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      position: relative;
      margin: 45px 0;

      .img-box {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #eee;
        overflow: hidden;
        position: relative;
        z-index: 1;
        margin: 0 12px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .info-box {
        padding-left: 14px;
        width: auto;
        max-width: calc(100% - 65px);
        position: relative;
        padding: 12px;
        background: #F4F5F9;
        border-radius: 0px 12px 12px 12px;

        .text {
          font-size: 14px;
          color: #6A6B6C;
          line-height: 20px;
          text-align: left;
        }
      }
    }

    .news-answer {
      justify-content: end;
      padding-left: 30%;
      padding-right: 0;
      align-items: center;
      flex-direction: row-reverse;
      position: relative;

      .info-box {
        background: linear-gradient(90deg, #DFF9EE 0%, #C7F6E6 100%);
        border-radius: 12px 0px 12px 12px;
        position: relative;

        .add-btn {
          position: absolute;
          right: 0;
          bottom: -25px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #04D1B8;
          width: 94px;
          height: 22px;
          font-size: 12px;
          color: #04D1B8;
          line-height: 22px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
